<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>力行会</title>
	<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
	<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/swiper-3.4.1.min.css">

	<script src="./js/jquery-1.9.1.js"></script>
	<script src="./js/swiper-3.4.1.jquery.min.js"></script>
	<script type="text/javascript" src="./js/bootstrap.js"></script>
	<script type="text/javascript" src="./js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
	<script src="./js/common.js"></script>
	<script>

		$(function(){
			$.fn.datetimepicker.dates['zh-CN'] = {
				days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
				daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
				daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
				months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
				monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
				today: "今天",
				suffix: [],
				meridiem: ["上午", "下午"]
			};
			$('.addDate').datetimepicker({
				language:  'zh-CN',
				startDate: new Date(),
				format: 'yyyy年mm月dd日',
				weekStart: 1,
				todayBtn:  1,
				autoclose: 1,
				todayHighlight: 1,
				startView: 2,
				minView: 2,
				forceParse: 0
			});

			var mySwiper = new Swiper ('.swiper-container', {
				loop: true,
				autoplay : 2000,
				// 如果需要分页器
				pagination: '.swiper-pagination'
			})
			var length = $('.recommend-contain a').length;
			for(var i = 0; i<length; i++){
				$('.recommend-contain a')[i].dataset.index=i;
			}
			$('.recommend-contain a').hover(function () {
				$(this).addClass('active').siblings().removeClass('active');
				mySwiper.slideTo(Number(this.dataset.index)+1, 600, false);
			},function () {
				mySwiper.startAutoplay();
			})
			setInterval(function () {
				var i = mySwiper.activeIndex;
				if(mySwiper.activeIndex== length +1 ){
					i = 1;
				}
				$('.recommend-contain a').eq(i-1).addClass('active').siblings().removeClass('active');
			},300)
			$('.quickSearch button').on('click', function () {
				if($('.searchPanel').css('display') == 'block'){
					$('.searchPanel').css('display','none')
				}else {
					$('.searchPanel').css('display','block')
				}
			})
			$('.close').on('click', function () {
				$('.searchPanel').css('display','none')
			})
			$('.head-contain ul li').on('mouseover', function(){
				$(this).children('.xiala').css('display','block')
			})
			$('.head-contain ul li').on('mouseout', function(){
				$(this).children('.xiala').css('display','none')
			})
		});
	</script>
</head>
<body>
<header>
	<div class='gray-head'>
		<div class='wrap'>
			<div >
				<a href="javascript:;"  data-toggle="modal" data-target="#login">登录</a> <span>|</span> <a data-toggle="modal" data-target="#register" href="">注册</a>
				<div class="tool quick-tool">
					<div class="searchForm">
						<div class="quickSearch">
							<!-- <input type="text" name="keyword" id="keyword" placeholder="快速搜索" /> -->
							<button >快速搜索<span class="accessible">搜索</span></button>
						</div>
						<div class="searchPanel">
							<div >
								<fieldset class="byDate">
									<div>
										<span>按时间出行</span>
										<a href="javascript:void(0);" class="close">X<span class="accessible">关闭搜索面板</span></a>
									</div>
									<ul>
										<li class='input-group date addDate'>
												<span class="input-group-addon">
			<span class="glyphicon glyphicon-calendar"></span>
		</span>
											<input type="text" /></li>
										<li class='input-group date addDate'>
												<span class="input-group-addon">
			<span class="glyphicon glyphicon-calendar"></span>
		</span>
											<input type="text" /></li>
									</ul>
								</fieldset>
								<fieldset class="byPlace" >
									<div>
										<span>按目的地</span>
									</div>
									<input type="text" placeholder="输入目的地">
								</fieldset>
							</div>
							<div class="actions">
								<i class="iconfont icon-fangdajing"></i>
								<button  type="submit">搜 索</button>
							</div>
						</div>
					</div>
				</div>　
				<div class="tool">
					<a href="javascript:void(0);" class="loginBtn">搜索</a>
				</div>
				<div class="fl">
					<i class="iconfont icon-phone"></i>
					<b> 0571 85865111</b>
				</div>
			</div>
		</div>

	</div>
	<div class="wrap">
		<div class="head-contain">
			<div class="logo"></div>
			<ul>
				<li>首页
				</li>
				<li>目的地
					<div class='xiala'>
						<div class='arrow'>
						</div>
						<a href="">欧洲</a>
						<a href="">美洲</a>
						<a href="">大洋洲</a>
						<a href="">亚洲</a>
						<a href="">非洲</a>
						<a href="">南极</a>
						<a href="">北极</a>
					</div>
				</li>
				<li class='theme-travel'>特色主题旅行
					<i class='hot'></i>
					<div class='xiala'>
						<div class='arrow'>
						</div>
						<a href="">春之芳华</a>
						<a href="">盛夏光年</a>
						<a href="">文艺之秋</a>
						<a href="">冬之恋歌</a>
						<a href="">极地探索</a>
						<a href="">游学考察</a>
						<a href="">养生之旅</a>
						<a href="">环球自驾</a>
					</div>
				</li>
				<li>自由行
					<i class='hot'></i>
					<div class='xiala'>
						<div class='arrow'>
						</div>
						<a href="">日本</a>
						<a href="">希腊</a>
						<a href="">美国</a>
						<a href="">希腊</a>
						<a href="">非洲</a>
						<a href="">南极</a>
						<a href="">北极</a>
					</div>
				</li>
				<li>私人定制</li>
				<li>力行会
					<div class='xiala'>
						<div class='arrow'>
						</div>
						<a href="">渊源</a>
						<a href="">品牌故事</a>
						<a href="">活动.分享</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
</header>
<div   class="swiper-container">
	<div class="swiper-wrapper">
		<a class="swiper-slide">
			<img src="./images/lunbo.jpg" alt="">
		</a>
		<a class="swiper-slide">
			<img src="./images/lunbo.jpg"  alt="">
		</a>
		<a class="swiper-slide">
			<img src="./images/lunbo.jpg" alt="">
		</a>
		<a class="swiper-slide">
			<img src="./images/lunbo.jpg" alt="">
		</a>
		<a class="swiper-slide">
			<img src="./images/lunbo.jpg" alt="">
		</a>
	</div>
	<!-- 如果需要分页器 -->
	<div class="swiper-pagination"></div>

</div>
<div  class='recommend'>
	<div class='wrap'>
		<div class='recommend-img'></div>
		<div class='recommend-contain'>
			<a href="">
				<img src="images/recommend-item.jpg" alt="">
			</a>
			<a href="">
				<img src="images/recommend-item.jpg" alt="">
			</a>
			<a href="">
				<img src="images/recommend-item.jpg" alt="">
			</a>
			<a href="">
				<img src="images/recommend-item.jpg" alt="">
			</a>
			<a href="">
				<img src="images/recommend-item.jpg" alt="">
			</a>
		</div>
	</div>
</div>
<footer >
	<div class="wrapper">
		<div class="footer-top">
			<span>「力行会」是</span>
			<img src="images/zql-logo.png" alt="">
			<span>旗下高端旅行品牌</span>
		</div>
		<div class="footer-bottom">
			<p><span>Copyright © 2016 Uniqueway Inc.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 保留所有权利&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;浙ICP备8888888</span><i>服务时间：周一至周五 9：00~17:30</i></p>
			<p>浙江省中青国际旅游有限公司&nbsp;&nbsp;&nbsp;地址：浙江省杭州市下城区凤起路56号2楼</p>
			<p>*本网站部分图片来自网络，若作者看到，请尽快与力行会联系。</p>
		</div>
	</div>
</footer>
<!-- 工具栏 -->
<aside class='contact-way'>
	<div class='contact-contain'>
	   <div class='wx-phone'>
	   	  <div class='phone-contain'>
	   	  	<div class='phone'>
				<img src="./images/icons/phone.png" alt="">
				<div class='phone-detail'>
					0571 85865111
					<p class='triangle-right'></p>
				</div>
			</div>
	   	  </div>
		   <div class='wx-contain'>
		   	<div class='wx'>
				<img src="./images/icons/wx.png" alt="">
				<div class='wx-detail'>
					<img src="./images/icons/wx-big.png" alt="">
					<p class='triangle-right'></p>
				</div>
			</div>
		   </div>
	   </div>
		<div class='arrow'>
			<img src="./images/icons/arrow.png" alt="">
		</div>
	</div>
</aside>	

<!-- 模态框（Modal） -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<div class="modalBody">
				<div>
					<hr>
					<span>使用手机登录</span>
					<hr>
				</div>
				<input type="text" placeholder="手机号">
				<input type="text" placeholder="密码">
				<p>
					<button>登录</button>
					<button>注册</button>
				</p>
			</div>

		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<div class="modalBody">
				<div>
					<hr>
					<span>使用手机注册</span>
					<hr>
				</div>
				<input type="text" placeholder="手机号">
				<input type="text" placeholder="图形验证码"> <img src="images/yanzheng.png" alt="">
				<input type="text" placeholder="验证码"> <button>发送验证码</button>
				<p>
					<button>立即注册</button>
				</p>
			</div>

		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>










</body>
</html>